import React from 'react';
import logo from './logo.svg';
import './App.css';
import loadable from '@loadable/component';
import { HashRouter as Router, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from '@redux/store';
import { exampleApi } from '@api/example';
import { initThemes } from '@store/web';
import { requestLoginStatus } from '@redux/actions/user';
import { getToken } from './utils/auth';
import themeStore from "store";
import { THEMES } from "@/store/constants";

/** 首页 */
const Home = loadable(() => import('./views/Home'));

/** 登录页 */
const Login = loadable(()=> import('./views/Login'));
/** 个人中心 */
const PersonalCenter = loadable(()=> import('./views/PersonalCenter'));
/** 电影长廊 */
const MovieGallery = loadable(()=> import('./views/MovieGallery'));
/** 管理页面 */
const ManagePage = loadable(()=> import('./views/ManagePage'));
/** 放映房间 */
const VideoRoom = loadable(()=>import('./views/VideoRoom'));
class App extends React.Component {
  constructor(props: any) {
    super(props);
   
    this.tranColor = this.tranColor.bind(this);
  }
  tranColor(title: string, value: string) {
    document.getElementsByTagName("body")[0].style.setProperty(title, value);
  }
  public componentDidMount(){
    //在页面加载完成时，获取登录状态
    let loginQuery = {
      token:getToken(),
    }
    console.log(loginQuery)
    requestLoginStatus(loginQuery,(theme)=>{
      if (this.myApp.current){

        this.myApp.current.className = "App "+theme;
        //改变主题颜色
        let themeGather = themeStore.get(THEMES);
        this.tranColor("--foreground-color", themeGather[theme].foregroundColor);
        this.tranColor("--span-color", themeGather[theme].spanColor);
        this.tranColor("--sub-span-color", themeGather[theme].subSpanColor);
        this.tranColor("--background-color", themeGather[theme].backgroundColor);
        this.tranColor(
          "--button-background-color",
          themeGather[theme].buttonBackgroundColor
        );
        this.tranColor(
          "--button-hover-background-color",
          themeGather[theme].buttonHoverBackgroundColor
        );
        this.tranColor("--button-color", themeGather[theme].buttonColor);
        this.tranColor("--border-color", themeGather[theme].borderColor);
        this.tranColor(
          "--matted-span-color",
          themeGather[theme].mattedSpanColor
        );
        this.tranColor(
          "--navigation-background-color",
          themeGather[theme].navigationBackgroundColor
        );
        this.tranColor(
          "--navigation-active-background-color",
          themeGather[theme].navigationActiveBackgroundColor
        );
        this.tranColor(
          "--navigation-hover-background-color",
          themeGather[theme].navigationHoverBackgroundColor
        );
      }
      
    })(store.dispatch);
    initThemes();
    // this.getHistory();
  }
  // private async getHistory(){
    
  //   const {data} = await exampleApi();
  //   console.log(data);

  // }
  private myApp = React.createRef<HTMLDivElement>();

  render(){
    return (
      <div className={['App','dark'].join(' ')} ref={this.myApp}>
        <Provider store={store}>
          <Router>
            <Route path="/" exact component={Home} />
            <Route path="/login" component={Login} />
            <Route path="/personalCenter" component={PersonalCenter} />
            <Route path="/movieGallery" component={MovieGallery} />
            <Route path="/managePage" component={ManagePage} />
            <Route path="/videoRoom/:room_id" component={VideoRoom} />
          </Router>
        </Provider>
        {/* <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header> */}
      </div>
    );
  }
  
}

export default App;
